<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Lava Lamp Menu</title>

<!-- <script src="../script/test/jquery-1.4.4.min.js" type="text/javascript"></script> -->
<script src="../script/jQuery1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="../script/jQuery1.7.2/lavaLamp/jquery.lavalamp-1.3.5.min.js" type="text/javascript"></script>
<script src="../script/utils/jquery.easing.1.3.js" type="text/javascript"></script>

<style type="text/css">
	ul#menu {
	    list-style:none;
	    margin:5px;
	    border:1px solid #333;
	    padding:10px;
	    overflow:auto; /* makes sure the container fits the floated list-items below */
	}
	ul#menu li{
	    position:relative; /* allows us to set the z-index */
	    z-index:5; /* raises the z-index of the line item 5 levels all other elements */
	    margin:3px 5px;
	    padding:5px 10px 4px;
	    float:left; /* floats list items to the left, creating a horizontal menu */
	}
	ul#menu li.backLava {
	    background-color:#fc0;
	    border:2px solid brown;
	}
</style>

<script type="text/javascript">
$(function() {
    $('ul#menu').lavaLamp();
});
</script>


</head>

<body>
	<ul id="menu">
		<li>Fun</li>
		<li>with</li>
		<li>jQuery</li>
		<li>LavaLamp</li>
	</ul>
</body>
</html>